<template>
  <div class="comment-box">
      <div class="img-box">
          <img :src="baseUrl+imgUrl" class="img-con" alt="头像">
      </div>
      <div class="comment-content">
          <div class="comment-name">
              <span class="name">{{name}}</span>
              <span class="time">{{getDate(date)}}</span>
          </div>
          <div class="commnet-char">
              {{content}}
          </div>
          <div class="comment-index">
              {{index}}楼
          </div>
      </div>
  </div>
</template>

<script>

import avater from "../../assets/we.jpg";
import {dayTime as time} from '../../compostion/useDate'
export default {
    props:{
        name:{
            type:String,
            default:"名字"
        },
        content:{
            tepe:String,
            default:"快速达发回来杀得了奥术大师多默认魔法这个利亚苏大哥很多加快速达发回来杀得了奥术大师多默认魔法这个利亚苏大哥很多加快速达发回来杀得了奥术大师多默认魔法这个利亚苏大哥很多加快速达发回来杀得了奥术大师多默认魔法这个利亚苏大哥很多加快速达发回来杀得了奥术大师多默认魔法这个利亚苏大哥很多加快速达发回来杀得了奥术大师多默认魔法这个利亚苏大哥很多加快速达发回来杀得了奥术大师多默认魔法这个利亚苏大哥很多加快速达发"
        },
        date:{
            type:String,
            default:"2022-03-04T11:07:55.399Z"
        },
        index:{
            type:String,
            default:"0"
        },
        imgUrl:{
            type:String,
            default:avater
        },
        baseUrl:{
            type:String,
            default:''
        }
    },
    setup(){
        const getDate = (d)=>{
            return time(d)
        }


        return{
            getDate
        }
    }

}
</script>

<style lang="less" scoped>
    .comment-box{
       position: relative;
       padding: 10px 0;
       width: 100%;
       height: 130px;
       display: flex;
       justify-content: space-between;
     
       border-bottom: 2px solid #eaecef;
        .comment-name{
            height: 30px;
            width:100%;
            line-height: 30px;
            display: flex;
            justify-content: space-between;
            .name{
                font-size: 16px;
                font-weight: 550;
            }
            .time{
                color:#999;
                
            }

        }

       .img-box{
           width: 100px;
           height: 100%;
          
           padding: 10px 0px 0px 10px;
           box-sizing: border-box;
           .img-con{
               width: 70%;
               height: 60px;
               border-radius: 50%;
               border: 1px solid #999;
               text-align: center;
           }

       }
       .comment-content{
           flex: 1 1;
           .commnet-char{
               height: 80px;
               font-size: 15px;
               overflow: hidden;
               
           }
           .comment-index{
               height: 20px;
               width: 100%;
               font-size: 15px;
               line-height: 20px;
               position: relative;
               padding: 5px 0;
               text-align: start;
               color: #999;
               bottom: 0px;
           }
       }
    }
</style>